﻿@{
    Layout = null;
}
@model IReklamo.Complaint
<div class="complaint" id="divComplaint@(Model.Id)">
    <div style="border-radius: 5px 5px 5px 5px; padding: 15px 15px 15px 15px; background: none repeat scroll 0 0 #F7F6F1;
        box-shadow: 1px 1px 3px #B4AAA0">
        <a href="/Complaints/View/@Model.Id" style="color:black">
            <div id="divTitle" style="font-weight: bold; display: inline-block; clear: both">
                <span id="spanTitle">@Model.Title</span>
                <input type="hidden" value="@Model.Comment"/>
            </div>
        </a>
        <div>
            <span style="font-size: 9px;">for :</span> @Model.Complainee&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="font-size: 9px;">posted : July 12, 2012</span></div>
        @{
            <div style="text-align: center; min-height: 131px;">
                @{
                    foreach (var visual in Model.Visuals.Take(2))
                    {
                    <div style="margin: auto; display: inline-block; padding: 1px;">
                        <img src="@visual.ThumbFile"/>
                    </div>
                    }
                }
            </div>
        }
        <div style="clear: both; position: relative; bottom: 0px; font-size: 8px;">
            <div class="divider">
            </div>
            <div id="divSupport@(Model.Id)" class="inlineBlock">
                <a id="linkSupport"  href="#" onclick="support(@Model.Id);return false;">
                    <img src="/content/img/support.png" />
                    SUPPORT (<span style="font-size: 10px; font-weight: bold;">@Model.TotalSupports</span>)
                </a>
            </div>
            &nbsp;
            <div id="divDislike@(Model.Id)" class="inlineBlock" rel="tooltip" title="I don't like this complaint">
                <a id="linkDislike" onclick="dislike(@Model.Id)">
                    <img src="/content/img/dislike.png" />
                    DISLIKE (<span style="font-size: 10px; font-weight: bold;">@Model.TotalDislikes</span>)
                </a>
            </div>
            &nbsp;
            <div id="divComment@(Model.Id)" class="inlineBlock">
                <a onclick="comment(@Model.Id)">
                    <img src="/content/img/comments.png" />
                    COMMENTS (<span style="font-size: 10px; font-weight: bold;">@Model.TotalComments</span>)
                </a>
            </div>
            <div id="divCommentSection@(Model.Id)" hidden>
                <div class="commentBox" id="divCommentBox@(Model.Id)" >
                    <textarea id="txtCommentBox@(Model.Id)" rows="1" placeholder="Write a comment..." style="width:95%;font-size:10px;"></textarea>
                    <div style="text-align: right">
                        <button onclick="addComment(@Model.Id);" type="button" class="btn  start" style="height:20px;padding-top:1px !important;font-size:10px;">
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
